<template>
  <el-select v-model="__value" :placeholder="placeholder" :style = 'cssStyle' :multiple="multiple" @change="handleChange" :clearable="clearable">
    <el-option v-for= 'item in lists' :label="item.label" :value="item.value" :key='item.value'></el-option>
  </el-select>
</template>

<script>
  import { dictionary, getDictListByParent } from '@/api/knowledgeManage/dictionary'
  export default {
    name: 'dictSelect',
    props: {
      dictCode: {
        type: String
      },
      cssStyle: {
        type: String
      },
      placeholder: {
        type: String
      },
      multiple: {
      },
      value: {},
      parentCode: {
        type: String
      },
      parentValue: {},
      clearable: false
    },
    data() {
      return {
        lists: []
      }
    },
    computed: {
      __value: {
        get() {
          return this.value
        },
        set(nval) {
          this.$emit('input', nval)
        }
      }
    },
    mounted() {
      if (!this.parentCode) {
        this.getDictList(this.dictCode).then((res) => { this.lists = res.data.list })
      } else {
        getDictListByParent({
          type: this.dictCode,
          parentCode: this.parentCode,
          parentValue: this.parentValue
        }).then((res) => { this.lists = res.data.list })
      }
    },
    methods: {
      getDictList(type) {
        return dictionary({ type: type })
      },
      handleChange(value) {
        this.$emit('change', value)
      }
    },
    watch: {
      parentValue: function() {
        getDictListByParent({
          type: this.dictCode,
          parentCode: this.parentCode,
          parentValue: this.parentValue
        }).then((res) => {
          this.lists = res.data.list
          this.__value = ''
        })
      }
    }
  }
</script>

<style scoped>

</style>
